<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单选框、复选框</title>
	<style>
		html,body{
			height: 100%;
			width: 100%;
		}
		.checkbox {
			/* 使用了border多占用了区域来增加可以点击的范围，复选框点击区域变成了20px 20px*/
			border:2px solid transparent;
			/* 使用了盒子阴影 来代替border的效果*/
			box-shadow: inset 0 1px,inset 1px 0,inset -1px 0,inset 0 -1px;
			background-color: #ffffff;
			background-clip: content-box;
			color: #d0d0d5;
		}
	</style>
</head>
<body>
<div class="checkbox" style="height: 16px;width: 16px;display: block"></div>

</body>
</html>